<template>

  <div class="login-page d-flex flex-column justify-center align-center">
    <el-form
      ref="formRef"
      :model="api.form"
      :rules="rules"
      class="login-form"
      label-width="120px"
      status-icon
    >
      <i-xyz-transition :duration="'3'" :ease="'in-out'" :left="'1'" appear mode="out-in">
        <div v-if="api.form.loginType=='ACCOUNT'" :key="'ACCOUNT'">
          <el-form-item
            label="用户账号"
            prop="username"
          >
            <el-input
              v-model.trim="api.form.username"
              :show-word-limit="false"
              autocomplete="username"
              clearable
              onfocus="this.removeAttribute('readonly');"
              placeholder="请输入用户账号" />
          </el-form-item>

          <el-form-item
            label="用户密码"
            prop="password"
          >
            <el-input
              v-model="api.form.password"
              clearable
              placeholder="请输入用户密码"
              show-password
              type="password" />
          </el-form-item>

          <el-form-item
            v-if="api.settingState.code"
            label="验证码"
            prop="captcha"
          >
            <el-input
              v-model="api.form.captcha"
              class="login-captcha"
              clearable
              placeholder="请输入验证码">
              <template #append>
                <div
                  style="height: 30px"
                  @click="api.captchaImage()">
                  <div
                    v-if="!api.img.path"
                    v-loading="api.img.loading"
                    style="height: 30px;width: 130px"></div>
                  <img
                    v-if="api.img.path"
                    v-loading="api.img.loading"
                    :src="'data:image/png;base64,' +api.img.path"
                    alt="captcha"
                    height="30"
                    width="130">
                </div>
              </template>
            </el-input>
          </el-form-item>

        </div>

        <div v-if="api.form.loginType == 'PHONE'" :key="'PHONE'">
          <el-form-item
            label="手机号"
            prop="username"
          >
            <el-input
              v-model="api.form.username"
              clearable
              placeholder="请输入手机号" />
          </el-form-item>

          <el-form-item
            label="短信验证码"
            prop="password"
          >
            <el-input
              v-model="api.form.password"
              autocomplete="new-password"
              clearable
              placeholder="请输入短信验证码">
              <template #append>
                <el-button
                  :disabled="api.smsState.timing!=60"
                  :loading="api.smsState.loading"
                  @click="api.sendSmsCode()">
                  {{ api.smsState.msg }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>

        </div>
        <div v-if="api.form.loginType == 'EMAIL'" :key="'EMAIL'">
          <el-form-item
            label="邮箱账号"
            prop="username"
          >
            <el-autocomplete
              v-model="api.form.username"
              :fetch-suggestions="querySearch"
              class="fill-width"
              clearable
              placeholder="请输入邮箱" />
          </el-form-item>

          <el-form-item
            label="邮箱验证码"
            prop="password"
          >
            <el-input
              v-model="api.form.password"
              clearable
              placeholder="请输入邮箱验证码">
              <template #append>
                <el-button @click="api.sendMail()">发送验证码</el-button>
              </template>
            </el-input>
          </el-form-item>
        </div>
      </i-xyz-transition>

      <el-form-item class="mb-0">
        <el-button
          :disabled="api.submitButton.disable"
          :loading="api.submitButton.loading"
          class="fill-width"
          type="primary"
          @click="submit">登录
        </el-button>
      </el-form-item>

      <el-form-item class="pt-6 mb-0">
        <div class="d-flex justify-space-between fill-width">
          <el-button
            :type="api.form.loginType==='ACCOUNT'?'primary':'info'"
            text
            @click="api.changLoginType('ACCOUNT')"
          >
            <template #icon>
              <i-icon icon="mdi-clipboard-account-outline" size="18px" />
            </template>
            账号登录
          </el-button>
          <el-button
            :type="api.form.loginType==='PHONE'?'primary':'info'"
            text
            @click="api.changLoginType('PHONE')"
          >
            <template #icon>
              <i-icon icon="mdi-cellphone" size="18px" />
            </template>
            手机号登录
          </el-button>
          <el-button
            :type="api.form.loginType==='EMAIL'?'primary':'info'"
            text
            @click="api.changLoginType('EMAIL')"
          >
            <template #icon>
              <i-icon icon="mdi-email-box" size="18px" />
            </template>
            邮箱登录
          </el-button>
        </div>
      </el-form-item>

    </el-form>

  </div>
</template>

<script lang="ts" setup>

import { LoginApi } from "~/api/system/login.api";
import { onMounted, reactive, ref } from "vue";
import { FormRules } from "element-plus";
import IIcon from "~/icesoft/components/icon/IIcon.vue";
import IXyzTransition from "~/icesoft/components/transitions/IXyzTransition.vue";

const api = new LoginApi();
const formRef = ref();

const rules = reactive<FormRules>({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

onMounted(() => {
  api.captchaImage();
  window.localStorage.removeItem("token");
});

function querySearch(queryString: string, cb: any) {
  let mail = "";
  if (api.form.username.endsWith(".com")) {
    console.log(api.form.username.indexOf("@"));
    mail = api.form.username.substring(0, api.form.username.indexOf("@"));
  } else {
    mail = api.form.username;
  }
  cb([
    { value: mail + "@163.com" },
    { value: mail + "@126.com" },
    { value: mail + "@139.com" },
    { value: mail + "@189.com" },
    { value: mail + "@sohu.com" },
    { value: mail + "@aliyun.com" },
    { value: mail + "@hotmail.com" },
    { value: mail + "@yahoo.com" },
    { value: mail + "@msn.com" },
    { value: mail + "@mail.com" },
    { value: mail + "@qq.com" },
    { value: mail + "@sina.cn" },
    { value: mail + "@gmail.com" },
  ]);
}

async function submit() {
  const values = await formRef.value.validate();
  if (values) {
    api.login();
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  height: 100vh;

  .login-form {
    width: 500px;

    .login-captcha {
      :deep(.el-input-group__append) {
        padding: 0;
      }
    }
  }
}
</style>
